<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="auto"
				class="flex-warp-container"
			>
				<el-form-item
					label="所属商户:"
					prop="merchantId"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
						placeholder="默认选择全部"
					></merchant-select>
				</el-form-item>
				<el-form-item style="margin-left: 8px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="refresh"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="table"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				:data="dataList"
				:max-height="tableHeight"
				highlight-current-row
				style="width: 100%"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					prop="index"
					align="center"
					:label="$t('common.serial_number')"
				>
					<template slot-scope="scope">
						<span>
							{{ pageSize * (pageNum - 1) + scope.$index + 1 }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="rateType"
					align="center"
					:label="$t('funds.virtual_exchange_rate_config.biz_name')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.bizName }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="currency"
					align="center"
					:label="
						$t('funds.virtual_exchange_rate_config.currency_type')
					"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.currency || '-' }}
							{{ currencySign[scope.row.currency] }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="rate"
					align="center"
					:label="$t('funds.virtual_exchange_rate_config.rate')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{
								splitUSDTValue(
									(
										scope.row.thirdRate +
										(scope.row.floatRate || 0)
									).toFixed(2),
									scope.row.bizType
								)
							}}
							/
							{{ scope.row.thirdRate.toFixed(2) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="rate"
					align="center"
					:label="
						$t(
							'funds.virtual_exchange_rate_config.float_exchange_rate'
						)
					"
					show-overflow-tooltip
				>
					<template slot="header">
						{{
							$t(
								'funds.virtual_exchange_rate_config.float_exchange_rate'
							)
						}}
						<br />
						{{
							$t(
								'funds.virtual_exchange_rate_config.compared_to_third_parties'
							)
						}}
					</template>
					<template slot-scope="scope">
						<span v-if="scope.row.floatRate > 0">
							+{{ decimalToFixed2(scope.row.floatRate) }}
						</span>
						<span v-else>
							{{ decimalToFixed2(scope.row.floatRate) }}
						</span>
					</template>
				</el-table-column>

				<el-table-column
					prop="operator"
					align="center"
					:label="$t('common.last_updateBy')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.operator }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="gameCount"
					align="center"
					:label="$t('common.last_updateAt')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedAt }}</span>
					</template>
				</el-table-column>

				<el-table-column
					prop="operating"
					align="center"
					:label="$t('common.actions')"
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('402011')"
							type="primary"
							icon="el-icon-edit"
							size="medium"
							@click="openEditDialog(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<el-dialog
			:title="$t('funds.virtual_exchange_rate_config.USDT_rate_edit')"
			:visible.sync="dialogVisible"
			width="500px"
			@close="onClose"
			:close-on-click-modal="false"
		>
			<el-form
				ref="formRef"
				:model="editFormData"
				:rules="rules"
				label-width="auto"
				@submit.native.prevent
			>
				<el-form-item
					:label="
						`${$t('funds.virtual_exchange_rate_config.biz_name')}:`
					"
				>
					{{ editFormData.bizName || '-' }}
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.virtual_exchange_rate_config.currency_type'
						)}:`
					"
				>
					{{ editFormData.currency || '-' }}
					{{ currencySign[editFormData.currency] }}
					<!-- {{ typeFilter(editFormData.currency, 'currency') }}
					({{ handleCurrency(editFormData.currency) }}) -->
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.virtual_exchange_rate_config.three_rate'
						)}:`
					"
				>
					{{ editFormData.thirdRate || '-' }}({{
						$t('funds.virtual_exchange_rate_config.current_now')
					}})
				</el-form-item>
				<el-form-item
					:label="
						`${$t('funds.virtual_exchange_rate_config.rate_set')}:`
					"
					prop="floatRate"
				>
					<el-input
						v-model="editFormData.floatRate"
						size="medium"
						:placeholder="$t('common.please_enter')"
						maxlength="10"
						style="width: 280px; color: #000"
					></el-input>
					<br />
					<span>
						{{
							$t(
								'funds.virtual_exchange_rate_config.rate_tip_text'
							)
						}}
					</span>
				</el-form-item>
			</el-form>
			<template #footer>
				<span>
					<el-button @click="dialogVisible = false">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						type="primary"
						@click="save"
						:disabled="editLoading"
						:loading="editLoading"
					>
						{{ $t('common.confirm') }}
					</el-button>
				</span>
			</template>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import MainContent from '@/components/MainContent/index.vue'
const name = 'virtualExchangeRateConfig'
export default {
	name: name,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			dataList: [],
			loading: false,
			editLoading: false,
			queryData: {
				merchantId: null
			},
			dialogVisible: false,
			editFormData: {},
			proxyKvconfigValue: {},
			memberKvconfigValue: {},
			currencySign: {
				CNY: '(¥)',
				VND: '(₫)',
				THB: '(฿)'
			}
		}
	},

	computed: {
		rules() {
			const validRate = (rule, value, callback) => {
				if (!value && Number(value) !== 0) {
					callback(
						new Error(
							this.$t(
								'funds.virtual_exchange_rate_config.form_rules_tip1'
							)
						)
					)
				} else if (
					!/^-?(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/.test(value)
				) {
					callback(
						new Error(
							this.$t(
								'funds.virtual_exchange_rate_config.form_rules_tip2'
							)
						)
					)
				} else if (value < -1 || value > 1) {
					callback(
						new Error(
							this.$t(
								'funds.virtual_exchange_rate_config.form_rules_tip2'
							)
						)
					)
				} else {
					callback()
				}
			}
			return {
				floatRate: [
					{
						required: true,
						message: this.$t(
							'funds.virtual_exchange_rate_config.form_rules_tip1'
						),
						trigger: 'blur'
					},
					{
						validator: validRate,
						trigger: 'blur'
					}
				]
			}
		}
	},
	mounted() {
		this.loadData()
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.loadData()
		}
		this.getSystemKvconfigValue(1)
		this.getSystemKvconfigValue(2)
	},
	methods: {
		loadData() {
			// if (!this.queryData.merchantId) {
			// 	this.dataList = []
			// 	return
			// }
			this.loading = true
			this.$api
				.getVirtualRateRecords({
					...this.queryData
				})
				.then((res) => {
					this.dataList = res.data || []
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		getSystemKvconfigValue(type) {
			this.loading = true
			this.$api
				.getSystemKvconfigValue({
					k:
						type === 1
							? 'account.member.withdraw.deposit.usdt.rate'
							: 'account.proxy.withdraw.deposit.usdt.rate'
				})
				.then((res) => {
					if (type === 1) {
						this.memberKvconfigValue = res.data.v
							.replace(/」|「/g, '')
							.split('，')
					} else {
						this.proxyKvconfigValue = res.data.v
							.replace(/」|「/g, '')
							.split('，')
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		splitUSDTValue(num, type) {
			num = parseFloat(num)
			type = parseInt(type)
			if (type === 1 || type === 2) {
				num =
					num < this.memberKvconfigValue[0]
						? this.memberKvconfigValue[0]
						: num
				num =
					num > this.memberKvconfigValue[1]
						? this.memberKvconfigValue[1]
						: num
			} else {
				num =
					num < this.proxyKvconfigValue[0]
						? this.proxyKvconfigValue[0]
						: num
				num =
					num > this.proxyKvconfigValue[1]
						? this.proxyKvconfigValue[1]
						: num
			}

			return num
		},
		openEditDialog(row) {
			this.editFormData = { ...row }
			this.dialogVisible = true
		},
		save() {
			this.$refs.formRef.validate((valid) => {
				if (
					this.editFormData.floatRate > 1 ||
					this.editFormData.floatRate < -1
				) {
					this.$message.error('超出可配置范围')
					return
				}
				if (valid) {
					this.editLoading = true
					this.$api
						.updateVirtualRate(this.editFormData)
						.then(() => {
							this.$message.success(
								this.$t('common.modify_success')
							)
							this.dialogVisible = false
							this.loadData()
							this.editLoading = false
						})
						.catch(() => {
							this.editLoading = false
						})
				}
			})
		},

		refresh() {
			if (!this.$store.getters.isZk) {
				this.queryData.merchantId = this.$store.getters.merchantInfo.id
				this.loadData()
			} else {
				this.queryData.merchantId = null
				this.loadData()
			}
		},
		onClose() {
			this.$refs.formRef.clearValidate()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__title {
	font-weight: 600;
	color: #000000c2;
}
::v-deep .el-dialog__header {
	border-bottom: 1px solid #00000015;
}
.table-wrapper {
	text-align: center;
	width: 100%;
	display: table;
	border: 1px solid #d9d9d9;
	border-collapse: collapse;
}
// ::v-deep .el-dialog__footer {
// 	text-align: center;
// }
.row {
	display: table-row;
}
.cell {
	display: table-cell;
	border: 1px solid #d9d9d9;
	height: 35px;
	width: 150px;
	vertical-align: middle;
}
.form-cell {
	padding: 15px 10px 0;
}
.bottom-info {
	color: #d9001b;
	text-align: center;
	margin: 5px 12px 0 0;
}
// ::v-deep .el-input__inner {
// text-align: center;
// }
::v-deep .adjustment-type {
	.el-input__inner {
		text-align: left;
	}
}
.title {
	background: #d9d9d9; /*  */
}
.title .cell {
	height: 50px;
}
.title .cell:not(:last-child) {
	border-right: 1px solid #fff;
}
</style>
